<template>
	<view>
		<u-picker :show="show" :columns="columns" keyName="name" @confirm="confirm" @cancel="show=false"></u-picker>
		<view class="allbanner" style="position: relative;">
			<view class="bannercenter flexcolumn">
				<view class="bannerimgtext">
					<image src="@/static/image/system/f7xn.png" mode="" class=""></image>
				</view>
				<view class="bannertext3 margin_top">留言单</view>
			</view>
			<image :src="topimg" mode=""></image>
		</view>
		<view class="mainpadding">
			<view class="flexbetween">
				<view class="flexleft">
					<view class="notitletext margin_right2" style="min-width: 150rpx;">选择地区</view>
					<input class="input" type="text" placeholder="请选择地区" disabled v-model="city_text" @click="pickerdzshow=true">
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="flexbetween margin_top" @click="show = true">
				<view class="flexleft ">
					<view class="notitletext margin_right2" style="min-width: 150rpx;">选择问题</view>
					<input class="input" type="text" placeholder="请选择问题" disabled v-model="zyzx_type_text">
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="margin_top">
				<view class="notitletext margin_right2">具体内容</view>
				<textarea class="textarea margin_top2" placeholder="具体描述实际情况" v-model="content"></textarea>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="gudingdb ffffff mainpadding">
			<view class="bigbtn" @click="submit">提交</view>
		</view>
		<pickercity :messageInfo="{pickerdzshow:pickerdzshow}" @surecity="surecity"></pickercity>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				show: false,
				columns: [],
				zyzx_type_id:"",
				zyzx_type_text:"",
				content:"",
				pickerdzshow:false,
				cityinfo:{},
				city_text:"",
				topimg:"",
			}
		},
		onLoad(options){
			this.zyzx_type_id = options.id
			this.zyzx_type_text = options.name
			this.getzyzx()
			this.getbanner()
		},
		methods: {
			getbanner() {
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 25,
					is_more: 2
				}, false, false, true).then(res => {
					this.topimg = res.data.image_text
				})
			},
			surecity(e) {
				this.pickerdzshow = false
				if(e){
					this.cityinfo = e
					this.city_text = e.provence + "/" + e.city
					console.log(e,999);
				}
			},
			submit(){
				if(this.city_text==""){
					httpRequest.toast("请选择地区")
					return false
				}
				if(this.zyzx_type_id==""){
					httpRequest.toast("请选择问题")
					return false
				}
				if(this.content==""){
					httpRequest.toast("请输入具体内容")
					return false
				}
				httpRequest.request('/api/user/tjZyzx', 'GET', {
					province_id:this.cityinfo.provenceid,
					city_id:this.cityinfo.cityid,
					zyzx_type_id:this.zyzx_type_id,
					content:this.content
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						setTimeout(()=>{
							uni.navigateBack(1)
						},1000)
					}
				})
			},
			confirm(e){
				this.zyzx_type_id = e.value[0].id
				this.zyzx_type_text = e.value[0].name
				this.show = false
			},
			getzyzx() { //专业咨询
				httpRequest.request('/api/index/zyzxTypeIndex', 'GET', {
				}, false, false, true).then(res => {
					this.columns.push(res.data)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.textarea {
		padding: 30rpx 20rpx;
		border: 1rpx solid #f5f5f5;
		width: 100%;
		box-sizing: border-box;
	}

	.input {
		// width: 400rpx;
		padding: 15rpx 20rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}
</style>